<template>
  <t-head-menu value="item1" height="120px">
    <template #logo>
      <!-- <div style="width: 272rpx;"></div> -->
      <img width="136" v-if="!asiderStore.isCollapse" class="logo"
        src="/src/assets/menu-logo.png" alt="logo" />
      <t-button theme="default" shape="square" variant="text" @click="changeCollapsed">
        <t-icon class="collapsed-icon" name="view-list" />
      </t-button>
    </template>

    <template #default>
      <TabPane />
    </template>
    <template #operations>
      <t-space>
        <t-dropdown :options="themeList" @click="themeChange">
          <t-button theme="default" shape="square" variant="text"> <CloudySunnyIcon /></t-button>
        </t-dropdown>
      </t-space>

      <t-space>
        <t-dropdown :options="langList" @click="langChange">
          <t-button theme="default" shape="square" variant="text"> <translate-icon /></t-button>
        </t-dropdown>
      </t-space>

      <t-dropdown :min-column-width="120" trigger="click">
        <template #dropdown>
          <t-dropdown-menu>
            <t-dropdown-item class="operations-dropdown-container-item" @click="handleNav('/base')">
              <user-circle-icon />{{ $t('layout.header.user') }}
            </t-dropdown-item>
            <t-dropdown-item class="operations-dropdown-container-item" @click="handleLogout">
              <poweroff-icon />{{ $t('layout.header.signOut') }}
            </t-dropdown-item>
          </t-dropdown-menu>
        </template>
        <t-button class="header-user-btn" theme="default" variant="text">
          <template #icon>
            <t-icon class="header-user-avatar" name="user-circle" />
          </template>
          <div class="header-user-account">Admin</div>
          <template #suffix><chevron-down-icon /></template>
        </t-button>
      </t-dropdown>
    </template>
  </t-head-menu>


</template>


<script setup>
import { ChevronDownIcon, PoweroffIcon, SettingIcon, TranslateIcon, UserCircleIcon,CloudySunnyIcon } from 'tdesign-icons-vue-next';
import { useAsiderStore } from '@/stores/asider'
import { useHeaderStore } from '@/stores/header';
import TabPane from '@/components/TabPane/TabPane.vue';
import { ref } from 'vue'
import { useI18n } from 'vue-i18n'
import { useRouter } from 'vue-router';
const router = useRouter()
const useI18 = useI18n()
const headerStore = useHeaderStore()
const asiderStore = useAsiderStore()
const langList = ref([
  { content: 'English', value: 'en_US' },
  { content: '简体中文', value: 'zh_CN' }
])
const themeList = [{
  content:'浅色主题',value:''
},{
  content:'深色主题',value:'dark'
}]

const langChange = (data) => {
  useI18.locale.value = data.value
  localStorage.setItem("language", data.value)
  console.log(data.value)
}
const themeChange = (data)=>{
  if(data.value == ''){
    document.documentElement.removeAttribute('theme-mode');
  }else{
    document.documentElement.setAttribute('theme-mode', 'dark');
  }
}



const changeCollapsed = () => {
  asiderStore.changeWidth()
}
const handleLogout = () => {
  router.push({
    path: '/login',
    query: { redirect: encodeURIComponent(router.currentRoute.value.fullPath) },
  });
};



</script>


<style>
.operations-dropdown-container-item {
  width: 100%;
  display: flex;
  align-items: center;
}

:deep(.t-dropdown__item-text) {
  display: flex;
  align-items: center;
}

.t-icon {
  font-size: var(--td-comp-size-xxxs);
  margin-right: var(--td-comp-margin-s);
}

:deep(.t-dropdown__item) {
  width: 100%;
  margin-bottom: 0;
}

&:last-child {
  :deep(.t-dropdown__item) {
    margin-bottom: 8px;
  }
}
</style>